<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
          <n-title title="核查统计明细列表"/>
          <el-button size="small" plain type="primary" @click="toVerifyStatsIndex">返回核查统计</el-button>
        </div>
        <div class="ha-top">
          <el-form :inline="true" :model="selectFormModel" class="demo-form-inline">
            <el-form-item label="行政区划：">
              <el-select v-model="selectFormModel.areaCode" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in subAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型：">
              <el-select v-model="selectFormModel.categoryId" clearable
                         style="margin-right: 10px;" size="mini" @change="onSearch">
                <el-option
                    v-for="item in minCategoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                  size="mini"
                  v-model="selectFormModel.departName"
                  clearable
                  clear="onSearch"
                  @keyup.enter.native="onSearch"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <data-table
            :api="selectWorkJudgeTaskList"
            ref="dataTable"
            :options="options"
            :columns="columns"
            :operates="operates"
            :query="selectFormModel"
        ></data-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue, } from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {selectWorkJudgeTaskList,
} from '@/api/verifyJudgeMark';
import {getMinCategory} from '@/api/investCategory';

import NTab from "@/components/NTab.vue";
import JudgeMarkReplenish from "@/components/verify/JudgeMarkReplenish.vue";
import {queryUserSubArea} from "@/api/area";
import router from "@/router";
import storeUtils from "@/utils/storeUtils";

@Component({
  methods: {selectWorkJudgeTaskList},
  components: {JudgeMarkReplenish, NTab, NTitle, DataTable}
})
export default class verifyStatsDetail extends Vue {

  @Ref('dataTable') private dataTable: any;
  subAreaList:any = [];
  minCategoryList:any = [];
  selectFormModel: any = {
    workId: router.currentRoute.query.workId,
    verifyTimes: router.currentRoute.query.verifyTimes,
    areaCode: router.currentRoute.query.areaCode,
    categoryId:undefined,
    departName:undefined
  };
  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };
  columns: any = [
    {label: '名称', prop: 'departName'},
    {label: '区县', prop: 'countyName'},
    {label: '类型', prop: 'categoryName'},
    {label: '地址', prop: 'departAddr'},
    {label: '是否已核查', prop: 'judgeState', render: function (createElement, context) {
        if (context.row.judgeState == '1') {
          return createElement('span', ['是']);
        } else {
          return createElement('span', ['否']);
        }
      }
    },
    {label: '是否有标错', prop: 'markState', render: function (createElement, context) {
        if (context.row.markState == '1') {
          return createElement('span', ['是']);
        } else {
          return createElement('span', ['否']);
        }
      }}
  ];
  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-view',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/verify/judgeMarkDetail',
            query: {taskId: row.id, dataId:row.dataCommonId, workId:row.workId,structureId:row.structureId, editTag: '0'}
          });
        }
      }
    ]
  };

  //返回核查统计首页
  toVerifyStatsIndex() {
    this.$router.push({path: '/verify/verifyStats'});
  }

  onSearch(): void {
    this.dataTable.refresh();
  }

  mounted() {
    //获取调查类别列表
    getMinCategory().then(res=> {
      if (res.data) {
        this.minCategoryList = res.data
      }
    });
    var dept = storeUtils.getStorageS(storeUtils.CONST.departInfo)
    if(dept) {
      if (dept.areaLevel == '2') {
        this.subAreaList.push({code:dept.areaCode, name:dept.areaName})
        this.selectFormModel.areaCode=dept.areaCode
      } else if (dept.areaLevel == '1' || dept.areaLevel == '0') {
        //获取登录人的下级区域列表
        queryUserSubArea().then(res=> {
          if (res.data) {
            this.subAreaList = res.data
          }
        })
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.verifyDataList {
  display: flex;
  gap: 10px;

  .ha-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}
.data-query-button{
  position: absolute;
  right: 20px;
}
::v-deep .parent-dialog {
  z-index: 2000 !important;
  height: 80vh;
  overflow-y: auto;
}
</style>
